<template>
	<page ref="page">

		<u-collapse>
			<u-collapse-item :title="item.lineName" v-for="(item, index) in lines" :key="index">
				<view>{{item.company_points.length}}个站点</view>
				<u-button type="success" @click="eventGoMap(item)">转到地图查看</u-button>
				<view class="u-time-line-container">
					<u-time-line>
						<u-time-line-item v-for="(item1,index2) of item.company_points" :key="index+'_'+index2">
							<!-- 此处自定义了左边内容，用一个图标替代 -->
							<!-- <template v-slot:node>
							<view class="u-node" style="background: #19be6b;">
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template> -->
							<template v-slot:content>
								<view>
									<view class="u-order-title">{{item1.stationName}} </view>
									<view class="u-order-desc">
										坐标：{{item1.position}}
										<u-button type="primary" @click="eventUpdatePoint(item,item1)">更新</u-button>
										<u-button type="primary" style="margin-top:20rpx;" @click="eventChoosePoint(item,item1)">地图选点</u-button>
									</view>
									<view class="u-order-time">预计到达时间：{{item1.plantime}}</view>
								</view>
							</template>
						</u-time-line-item>
						<!-- 	<u-time-line-item> 
						<template v-slot:content>
							<view>
								<view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
								<view class="u-order-time">2019-12-06 22:30</view>
							</view>
						</template>
					</u-time-line-item> -->
					</u-time-line>

				</view>

			</u-collapse-item>
		</u-collapse>



		<!-- 	<view v-for="(line,index) of lines" :key="'line_'+index">
			<view>线路：{{line.lineName}}</view>
			<view></view>
		</view> -->

	</page>
</template>

<script>
	import page from '@/components/base-page/page.vue'
	import mapService from './services.js'
	export default {
		components: {
			page
		},
		data() {
			return {

				lines: [],
				tempPoint: null,
			}
		},
		mounted() {

			this.lines = mapService.getAll();
		},
		methods: {
			eventEdit(id) {
				uni.navigateTo({
					url: './edit?id=' + encodeURIComponent(line.id)
				})
			},
			eventGoMap(line) {
				uni.navigateTo({
					url: './detail?id=' + encodeURIComponent(line.id) + '&json=' + encodeURIComponent(JSON
						.stringify(line)),
					fail(e) {
						console.log(e)
					}
				})
			},
			eventUpdatePoint(line, point) {
				const me = this;
				this.$message.confirm(() => {
					uni.getLocation({
						type: 'wgs84',
						success(res) {
							point.position = [res.longitude, res.latitude];
							mapService.save();
							me.$message.toast();
						}
					});
				}, '确定要更新这个站点的坐标吗？')
			},
			eventChoosePoint(line, point) {
				const me = this;
				this.tempPoint = point
				uni.navigateTo({
					url: './choosePoint?id=' + encodeURIComponent(line.id) + '&json=' + encodeURIComponent(JSON
						.stringify(line)),
					fail(e) {
						console.log(e)
					}
				})


				// this.$message.confirm(() => {
				// 	uni.getLocation({
				// 		type: 'wgs84',
				// 		success(res) {
				// 			point.position = [res.longitude, res.latitude];
				// 			mapService.save();
				// 			me.$message.toast();
				// 		}
				// 	});
				// }, '确定要更新这个站点的坐标吗？')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-time-line-container {
		padding: 0 30rpx;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
